<template>
  <div>
    <div class="grid-content bg-purple">
      <div class="content ">
        <div class="header">
          <div class="title">
            工单统计
            <span class="time">{{ $store.getters.startTime }} ~ {{ $store.getters.endTime }}</span>
          </div>
        </div>
        <div class="body">
          <div class="stats">
            <div class="num">{{ total }}</div>
            <div class="text">工单总数（个）</div>
          </div>
          <div class="stats">
            <div class="num">{{ completedTotal }}</div>
            <div class="text">完成工单（个）</div>
          </div>
          <div class="stats">
            <div class="num">{{ progressTotal }}</div>
            <div class="text">进行工单（个）</div>
          </div>
          <div class="stats">
            <div class="num">{{ cancelTotal }}</div>
            <div class="text">取消工单（个）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userWork } from '@/api'
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    startTime: {
      type: String
    },
    // eslint-disable-next-line vue/require-default-prop
    endTime: {
      type: String
    }
  },
  data() {
    return {
      cancelTotal: 0,
      progressTotal: 0,
      total: 0,
      completedTotal: 0
    }
  },
  async created() {
    const res = await userWork({
      start: `${this.$store.getters.startTime} 00:00:00`,
      end: `${this.$store.getters.endTime} 23:59:59`
    })
    console.log(res)
    res.data.forEach(item => {
      this.cancelTotal += item.cancelTotal
      this.progressTotal += item.progressTotal
      this.total += item.total
      this.completedTotal += item.completedTotal
    })
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/count.scss";

</style>

